<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style>
        div{
            border: 1px solid black;
        }
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .box {
            display: -webkit-flex; 
            display: flex;
            flex-direction: column; 
            /* width: 100%; */
            height: 100%;
        }
        .header{
            /* text-align: center; */
            display: flex; 
            flex-direction: row;
            justify-content: flex-start;
            height: 70px;
            flex-grow:0;
        }
        .header .logo{
            flex-basis: 200px;
            flex-shrink:0;
        }
        .header-right{
            display: flex;
            /* flex-direction: row; */
            justify-content: space-between;
            /* background-color: red; */
            width: 100%;
        }

        .header .title{
            display: flex;
            align-items: center; 
            width: 400px;
        }
        .header .user{
            display: flex;
            align-items: center; 
            width: 200px;
        }

        .body{
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-grow:1;
            height: 100%;
        }
        .bar{
            width: 200px;
            display: flex;
            flex-shrink:0;
            height: 100%;
        }
        .content{
            width: 100%;
            display: flex;
        }
    </style>
    </head>
    <body>
        <div class="box">
            <div class="header">
                <div class="logo">
                    logo
                </div>
                <div class="header-right">
                    <div class="title">
                        标题
                    </div>
                    <div class="user">
                        用户
                    </div>
                </div>
                
            </div>
            <div class="body">
                <div class="bar">
                    导航
                </div>
                <div class="content">
                    内容
                </div>
            </div>
        </div>
       
    </body>
</html>